<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


<!DOCTYPE html>
<html>
	<head>
	  <meta charset="utf-8">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <title>登录页面</title>
	  <!-- Bootstrap -->
	  <link href="${pageContext.request.contextPath }/dist/css/bootstrap.css" rel="stylesheet">
	  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/login.css"/>
	</head>
	<body>
   ${error }
		<div class="container">    
		      <form class="form-signin" action="#" method="post">
		        <h2 class="form-signin-heading text-center">登录</h2>
		        <label for="inputEmail" class="sr-only">Email address</label>
		        <input type="email" id="inputEmail" class="form-control" name="email" placeholder="邮箱" required autofocus>
		        <label for="inputPassword" class="sr-only">Password</label>
		        <input type="password" id="inputPassword" class="form-control" name="password"  placeholder="密码" required>
		        <div class="checkbox">
		          <label>                                                 <!-- 给一个Id  用来判断何时  显示                 向左          80px        默认隐藏                                       -->
		            <input type="checkbox" name="rm" value="1">记住我  <span id="showMsg"  style="color:red;padding-left:80px;display: none;">用户名或密码错误！！！</span>
		          </label>
		        </div>                               <!--  取消   自动提交   并给一个Id -->
		        <button class="btn btn-lg btn-primary btn-block" id="btn">登录</button>    
		      </form>
		    </div>        <!-- onclick="alert('Hello 千锋教育!!!')"  <c:if test="${result != null }">alert('Hello 千锋教育!!!')</c:if> -->
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="${pageContext.request.contextPath }/js/jquery.js"></script>
		<script src="${pageContext.request.contextPath }/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="${pageContext.request.contextPath }/dist/js/bootstrap.js"></script>
		
	
		<!--  自动登录            jquery.cookie.js  提供了  Cookie方法
		   
		不管是否登录   在显示登录页面时  先到后天拿数据         使用AJXA  技术
		判断  数据    
		
		  -->
		<script type="text/javascript">
		
		   // 向 Cookie中  取 数据         
		  var email = $.cookie("email");
		  var password = $.cookie("password"); 
		   
		  //  打印 取到的数据    
		  console.log("email:",email);
		  console.log("password:",password);
	
		//  自动登录
		  if(email != null && password != null){
			  
			  //  使用AJAX  进行登录校验 
			  $.post("LoginJsonServlet",{email:email,password:password},function(d){
				  //  页面控制台 打印  是否 拿到 验证后的数据 
				  console.log(d);
				  
				  if(d.code == 200){
					  //登录成功
					  window.location.href="book_list.jsp";
				  }	  
			  },"json");
  
		  }
		  
		  
	 // 手动登录  
		 
	 // 添加一个事件
		$("#btn").click(function(){
			
		 //  获取 form  表单中的数据                AJAX  提供的将 form表单要提交的 全部 序列化    成 String 类型    交给  AJAX 
		var formP =  $("form").serialize();     // serialize: 序列化
		console.log(formP);  //  控制台 打印    
			                              //   发送成功时的回调函数
		   $.post("LoginJsonServlet",formP,function(d){
			   
			  /*  console.log("d=",d); */
			  
			  
			  if(d.code == 200){
				  //登录成功    跳转到  图书列表    
				  window.location.href="book_list.jsp";
			  }else{
				  // 登录失败      添加样式  显示  错误 
				  
				  $("#showMsg").css({
					  
					  "display":"inline-block"
					  
				  });
				  
				  
				/*   window.location.href="index.jsp"; */
			  }
			  
			  
			  
			   
		   },"json");       //   返回内容格式
		  
		
		
		
			return false;  //   button  自动提交
		});  
		  
		
		</script>
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
